<template>
  <div class="change-ticket-form">
    <el-dialog :title="dialogTitle" v-model="formDialogVisible" custom-class='dialog_right dialogScroll_add' top="0%"
               @close='closeDialog("addParkingForm")' @open='openDialog'>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - 200)+'px'}]">

        <div class="ticket-card">
          <el-row class="station-info">
            <el-col :span="8" class="station-name">{{ orderDetail.startSite }}</el-col>
            <el-col :span="8">
              <div class="detail-info">
                约{{ orderDetail.time }}小时
                <mk-ticket-arrow class="ticket-arrow"></mk-ticket-arrow>
              </div>
            </el-col>
            <el-col :span="8" class="station-name">{{ orderDetail.endSite }}</el-col>
          </el-row>
          <div class="other-info">
            <el-row :gutter="20">
              <el-col :span="4">发车时间</el-col>
              <el-col :span="20">{{ orderDetail.rideTime | formatMinutes }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">购票数量</el-col>
              <el-col :span="20">{{ orderDetail.count }} 张</el-col>
            </el-row>
          </div>
        </div>

        <el-form :model="submitForm" :rules="submitFormRules"
                 ref="submitForm" label-width="96px">
          <div class="el-form-item-info">
            <el-form-item label="购票人姓名">{{ orderDetail.buyer }}</el-form-item>
            <el-form-item label="电话">{{ orderDetail.phone }}</el-form-item>
            <el-form-item label="应付金额">￥{{ orderDetail.price | currency('', 2) }} * {{ orderDetail.count }}</el-form-item>
            <el-form-item label="合计金额">￥{{ orderDetail.totalPrice | currency('', 2) }}</el-form-item>
          </div>

          <el-form-item label="改签时间" prop="scheduleRecordId"
                        v-if="type==='change'">
            <el-select v-model='submitForm.scheduleRecordId'
                       placeholder="请选择改签时间（必选）">
              <el-option v-for="(item,index) in changeTime" :key="index"
                         :label="item.date" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </el-scrollbar>

      <div slot="footer" class="dialog-footer footerStyle">
        <el-button type="primary" class="btn-primary" :disabled="isSubmitLoading" v-if="type==='refund'"
                   @click='submitRefund'>确定退票</el-button>
        <el-button type="primary" class="btn-primary"  :disabled="isSubmitLoading" v-if="type==='change'"
                   @click='submitChange'>确定改签</el-button>
        <el-button type='primary' class='btn-cancel'
                   @click="formDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import MkTicketArrow from '../../../components/ticketArrow.vue'
  import ticketService from '../../../services/ticket'
  import {mapState} from 'vuex'
  export default {
    name: 'sellTicketForm',

    components: {
      MkTicketArrow
    },

    props: ['dialogVisible', 'type', 'orderId'],
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
    }),
    methods: {
      closeDialog() {
        this.$refs.submitForm.resetFields();
        this.$emit('closeDialog');
      },
      openDialog() {
        if (this.type === 'change') {
          this.dialogTitle = '改签';
        } else {
          this.dialogTitle = '退票';
        }

        ticketService.loadOrderDetailServer ({
          id: this.orderId
        }, data => {
          this.orderDetail = data.data;
        });

        ticketService.loadChangeTimeServer ({
          fields: 'date,id', id: this.orderId
        }, data => {
          this.changeTime = data.data.elements;
          for (let item in this.changeTime) {
            this.changeTime[item].date = new Date(this.changeTime[item].date).pattern('yyyy-MM-dd HH:mm');
            this.changeTime[item].id = (this.changeTime[item].id).toString();
          }
        });
      },

      submitChange () {
        this.$refs['submitForm'].validate((valid) => {
          if (valid) {
            this.submitForm.orderId = this.orderId;
            this.isSubmitLoading = true;
            ticketService.changeTicketServer (this.submitForm, () => {
              this.$message.success('改签成功');
              this.$emit('submitSuccess');
              this.isSubmitLoading = false;
              this.$emit('closeDialog');
            }, () => {
              this.isSubmitLoading = false;
            });
          }
        });
      },

      submitRefund () {
        this.isSubmitLoading = true;
        ticketService.refundTicketServer ({
          id: this.orderId
        }, () => {
          this.$message.success('退票成功');
          this.$emit('submitSuccess');
          this.isSubmitLoading = false;
          this.$emit('closeDialog');
        }, () => {
          this.isSubmitLoading = false;
        });
      }
    },

    watch: {
      dialogVisible: function (value) {
        this.formDialogVisible = value;
      }
    },

    mounted () {
    },

    data () {
      return {
        dialogTitle: '退票',
        isSubmitLoading: false,
        formDialogVisible: false,
        orderDetail: {},
        changeTime: [],
        submitForm: {
          orderId: '',
          scheduleRecordId: ''
        },
        submitFormRules: {
          scheduleRecordId: { required: true, message: '请选择改签时间', trigger: 'change' },
        },
      }
    },

    filters: {
      formatMinutes (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd HH:mm');
        } else {
          return '';
        }
      }
    }
  }
</script>

<style lang='less'>
  .change-ticket-form {
    .el-form-item-info {
      .el-form-item {
        margin-bottom: 10px;
      }
    }
    .ticket-card {
      margin-bottom: 30px;
      width: 84%;
    }
  }
</style>
